<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  <link rel="stylesheet" href="/stylesheets/reset.css">
  <link rel="stylesheet" href="/stylesheets/car.css">
  <title>小马物联网</title>
</head>
<body>
<!--这里改过了 -->
<div id="loadding-pannel">
  <div class="little-pannel">
    <i class="iconfont">&#xe644;</i>
  </div>
  <div class="regist-pannel">
    <h2 class="title">绑定手机号</h2>
    <div class="from-group">
      <span class="from-label">手机号:</span>
      <input type="text" placeholder="请输入手机号" class="phone-num"/>
      <span id="regist_btn" class="regist-btn forbiden">发送验证码</span>
    </div>
    <div class="from-group">
      <span class="from-label">验证码:</span>
      <input type="text" placeholder="请输入验证码" class="regist-num"/>
    </div>
    <span id="submit" class="submit forbiden">确定</span>
    <span class="close"><i class="iconfont">&#xe641;</i></span>
  </div>
</div>
<div class="box-user-pannel"  style="display:none">
  <div class="top">
    <div class="header">
      <div class="user-msg">
        <div class="user-img"><img src="/images/avatar.png" alt=""></div>
        <h2 class="user-name">用户名称</h2>
      </div>
    </div>
    <div class="banner-msg border-1px-bottom">
      <span class="announce-icon"><i class="iconfont">&#xe66a;</i></span>小马物联网优惠用户计划
      <a href="" class="more">更多优惠<i class="iconfont">&#xe747;</i></a>
    </div>
  </div>
  <div class="main-lock-msg" id="main_lock_msg" data-num=<%= totalNum %>>
    <div class="pull-area">
      <i class="circle"></i>
      <span class="pull-text">这里显示下拉文字</span>
    </div>
    <ul class="lock-msg-list">
      <% carArr.forEach(function(car, key){ %>
      <li class="item border-1px-bottom">
        <div class="lock-img-msg">
          <div
            <% if(car.lockstatus){ %>
            class="lock-status top-down"
            <% }else{ %>
            class="lock-status top-up"
            <% } %>
          >
            <img src="/images/top.png" alt="" class="top">
            <img src="/images/bottom.png" alt="" class="bottom">
          </div>
          <p class="lock-num"><%= car.id %></p>
        </div>
        <div class="lock-controller">
          <span class="community-content"><%= car.comunity %></span>
          <!--0代表关状态，1代表开状态 -->
          <div class="lock-switch" flag=<%= car.lockstatus %>>
            <% if(car.lockstatus){ %>
            <span class="btn off">升</span>
            <% }else{ %>
            <span class="btn on">降</span>
            <% } %>
          </div>
          <p class="last-stop-content">上次停车<span class="last-stop-time">12-17 23:01:47</span><i class="iconfont">
              &#xe748;</i></p>
        </div>
      </li>
      <% }) %>
    </ul>
    <ul class="lock-msg-change-list">
      <li class="lock-change-item">
        <div class="lock-change-controller">
          <p class="lock-num">A107</p>
          <span class="controller-btn">关</span>
        </div>
      </li>
      <li class="lock-change-item">
        <div class="lock-change-controller">
          <p class="lock-num">A107</p>
          <span class="controller-btn">关</span>
        </div>
      </li>
      <li class="lock-change-item">
        <div class="lock-change-controller">
          <p class="lock-num">A107</p>
          <span class="controller-btn">关</span>
        </div>
      </li>
      <li class="lock-change-item">
        <div class="lock-change-controller">
          <p class="lock-num">A107</p>
          <span class="controller-btn">关</span>
        </div>
      </li>
      <li class="lock-change-item">
        <div class="lock-change-controller">
          <p class="lock-num">A107</p>
          <span class="controller-btn">关</span>
        </div>
      </li>
      <li class="lock-change-item">
        <div class="lock-change-controller">
          <p class="lock-num">A107</p>
          <span class="controller-btn">关</span>
        </div>
      </li>
      <li class="lock-change-item">
        <div class="lock-change-controller">
          <p class="lock-num">A107</p>
          <span class="controller-btn">关</span>
        </div>
      </li>
      <li class="lock-change-item">
        <div class="lock-change-controller">
          <p class="lock-num">A107</p>
          <span class="controller-btn">关</span>
        </div>
      </li>
    </ul>
    <div class="footer-loading-pannel" id="footer_loading_pannel">
      <span class="footer-text"><i class="circle"></i><span class="footer-loading-text">加载中</span></span>
    </div>
  </div>
</div>
<div class="box-company-pannel" id="box_company_pannel" >
  <div class="select-pannel">
    <div class="select-content">
      <span class="btn">01</span>
      <span class="btn">02</span>
      <span class="btn">03</span>
      <span class="btn">04</span>
      <span class="btn">05</span>
      <span class="btn">06</span>
      <span class="btn">07</span>
      <span class="btn">08</span>
      <span class="btn">09</span>
      <span class="btn">10</span>
      <span class="btn">11</span>
      <span class="btn">12</span>
      <span class="btn">13</span>
      <span class="btn">14</span>
    </div>
    <span class="arrow"></span>
  </div>
  <div class="header">
    <div class="user-img">
      <img src="/images/avatar.png" alt=""/>
      <p class="username">用户名称</p>
    </div>
    <div class="controller-area">
      <div class="lock-area">
        <div class="lock-inner-area">
          <div class="lock-status top-up">
            <img src="/images/top.png" alt="" class="top">
            <img src="/images/bottom.png" alt="" class="bottom">
          </div>
        </div>
      </div>
      <div class="lock-num-btn">34</div>
      <p class="lock-select-msg">选择车位编号</p>
    </div>
  </div>
  <div class="banner-msg border-1px-bottom">
    <span class="announce-icon"><i class="iconfont">&#xe66a;</i></span>小马物联网优惠用户计划
    <a href="" class="more">更多优惠<i class="iconfont">&#xe747;</i></a>
  </div>
  <div class="main-pannel">
    <div class="lock-controller">
      <span class="community-content">燕大西苑</span>
      <!--0代表关状态，1代表开状态 -->
      <div class="lock-switch" flag="0">
        <span class="btn on">降</span>
      </div>
      <p class="last-stop-content">上次停车<span class="last-stop-time">12-17 23:01:47</span><i class="iconfont">
          &#xe748;</i></p>
    </div>
  </div>
</div>
<div class="footer">
  <div class="footer-item home">
    <div class="footer-msg"><i class="iconfont">&#xe6b8;</i>
      <p>首页</p></div>
  </div>
  <div class="footer-item person">
    <div class="footer-msg"><i class="iconfont">&#xe736;</i>
      <p>我的</p></div>
  </div>
  <div class="footer-item help">
    <div class="footer-msg"><i class="iconfont">&#xe620;</i>
      <p>帮助</p></div>
  </div>
</div>
</body>
<script src="/js/zepto.min.js"></script>
<script src="/js/touch.js"></script>
<script src="/js/fx.js"></script>
<script>
  $(function () {
    //车锁默认加载序号
    var LoadingStartIndex = 5
    //获取数据的默认步长
    var defaultStep = 5
    var totalNum = parseInt($('#main_lock_msg').attr("data-num"))
    //是否加载完了全部数据
    var isGetAllData = totalNum > LoadingStartIndex ? false : true
    //获取车锁信息列表容器
    var main_lock_list_container = $('#main_lock_msg .lock-msg-list')
    //获取车锁信息列表
    var main_lock_list = $('#main_lock_msg .lock-msg-list .item')
    //获取车锁控制开启开关
    var lock_switch_on = main_lock_list.find('.lock-switch .on')
    //获取车锁控制关闭开关
    var lock_switch_off = main_lock_list.find('.lock-switch .off')
    //0代表关状态，1代表开状态
    //获得加载面板
    var loadding_pannel = $('#loadding-pannel')
    //获取屏幕可视高度
    var viewPortHeight = $(window).height()
    //获取屏幕的文档高度
    var whoreHeight = $(document).height()
    //获取底部动态加载面板
    var footer_loading_pannel = $('#footer_loading_pannel')
    //获取底部面板
    var footer_pannel = $('.footer')
    //动态获取数据的方法
    var getMoreLockList = function (cb) {

      $.ajax({
        type: "post",
        url: "/car/add",
        data: {

          start: LoadingStartIndex,
          step: defaultStep
        },
        success: function (data) {

          var totalNum = data.totalNum

          if (LoadingStartIndex <= totalNum - defaultStep) {

            LoadingStartIndex += defaultStep

            if (LoadingStartIndex == totalNum) {

              isGetAllData = true
            }
          } else {

            isGetAllData = true
          }


          if (typeof cb == 'function') {

            cb(data.carArr)
          }

        }
      })
    }
    //验证手机号的函数
    var regitst_phone = function () {
      //获取蒙版
      var _loaddingPannel = $('#loadding-pannel')
      //获取电话号码认证面板
      var _phonePannel = _loaddingPannel.find('.regist-pannel')
      //获取关闭按钮
      var _close = _phonePannel.find('.close')
      //获取输入手机号的input选框
      var _phoneInput = _phonePannel.find('.phone-num')
      //获取验证码的input选框 
      var _registNum = _phonePannel.find('.regist-num')
      //获取获得验证码的按钮
      var _registBtn = _phonePannel.find('#regist_btn')
      //获取提交按钮
      var _submit = _phonePannel.find('#submit')
      var _registFlag = {
        isPhoneNumCorrect: false,
        isRecevingMsg: false,
        isRegistNotNull: false
      }

      //显示认证面板的方法
      this._showRegistPannel = function () {
        _loaddingPannel.addClass('color-pannel')
        _loaddingPannel.show()
        _phonePannel.show()
        $('body').addClass("forbiden-scroll")
        footer_pannel.hide()
      }
      //关闭面板的方法
      var _closePannel = function () {
        if (_loaddingPannel.hasClass('color-pannel')) {
          _loaddingPannel.removeClass('color-pannel')
        }
        _loaddingPannel.hide()
        _phonePannel.hide()
        $('body').removeClass("forbiden-scroll")
        footer_pannel.show()


      }
      //改变确定按钮样式的方法
      var _changCommitBtn = function (target) {

        if ($(target).hasClass("forbiden")) {
          $(target).removeClass("forbiden")
        } else if ($(target).hasClass("active")) {
          $(target).removeClass("active")
        }
        if (_registFlag.isPhoneNumCorrect && _registFlag.isRegistNotNull) {
          $(target).addClass("active")
        } else {
          $(target).addClass("forbiden")
        }
      }
      //为了修复键盘出现footer上来的bug
      var focusInput = function () {

        footer_pannel.hide()

      }
      var blurInput = function () {

        footer_pannel.show()
      }
      //给close绑定事件
      _close.on('tap', _closePannel)
      //输入手机号input框的事件监听
      _phoneInput.on('input', function () {
        _registFlag.isPhoneNumCorrect = false
        //获取电话号码
        var phoneNum = $(this).val()
        _forbidenBtn(_registBtn)
        if (phoneNum.match(/^\d{11}$/)) {
          _registFlag.isPhoneNumCorrect = true

          if (_registFlag.isPhoneNumCorrect && !_registFlag.isRecevingMsg) {
            _activeBtn(_registBtn)
          }
        }
        _changCommitBtn(_submit)
      })


      _registNum.on('input', function () {
        //获取验证码input框事件监听
        var registCode = $(this).val()

        if (registCode != "") {
          _registFlag.isRegistNotNull = true
        } else {
          _registFlag.isRegistNotNull = false
        }

        _changCommitBtn(_submit)
      })


      _registBtn.on('tap', function () {
        if (_registFlag.isPhoneNumCorrect && !_registFlag.isRecevingMsg) {
          _forbidenBtn(_registBtn)
          _registFlag.isRecevingMsg = true
          _setCountDown(function () {
            if (_registFlag.isPhoneNumCorrect) {
              _activeBtn(_registBtn)
            } else {
              _forbidenBtn(_registBtn)
            }
            _registFlag.isRecevingMsg = false
          })
        }
      })

      //点击确定按钮执行的操作
      _submit.on('tap', function () {

        if (_registFlag.isPhoneNumCorrect && _registFlag.isRegistNotNull) {

          var phoneNum = _phoneInput.val()

          var registCode = _registNum.val()

          if (phoneNum == '18310616080' && registCode == '1234') {

            _closePannel()

          } else {

            alert('手机号或验证码错误')

          }
        }


      })
      //使验证码图标变为禁止状态的函数
      var _forbidenBtn = function (target) {

        if (target.hasClass('active')) {
          target.removeClass('active')
        }
        target.addClass('forbiden')
      }
      //使验证码图标变为激活状态的函数
      var _activeBtn = function (target) {
        if (target.hasClass('forbiden')) {
          target.removeClass('forbiden')
        }
        target.addClass('active')
      }
      //设置倒计时的方法
      var _setCountDown = function (cb) {
        var limitTime = 60
        var timer = null
        _registBtn.text(limitTime + 's后重试')
        timer = setInterval(function () {
          if (limitTime <= 1) {
            clearInterval(timer)
            timer = null
            if (typeof cb == 'function') {
              cb()
            }
          }
          if (limitTime == 1) {
            _registBtn.text('发送验证码')
          } else {
            _registBtn.text(--limitTime + 's后重试')
          }

        }, 1000)

      }
    }
//    var registPhone = new regitst_phone()
//        registPhone._showRegistPannel()
    //下拉刷新及触底加载函数
    var pull_refresh = function (target, height, loading_icon, loading_icon_className, loading_text) {
      //window对象中是否有ontouchstart事件
      var _hasTouch = 'ontouchstart' in window;
      var _start = 0
      var _end = 0
      var _pos = 0
      var _refreshFlag = {
        //判断是否是在执行下拉操作的flag
        isPulling: false,
        //判断是否到达了最底部
        isdrawing: false,
        //下拉锁
        drawinglock: true,
        //是否在接收数据
        isGettingData: false
      }
      var matchTest = {

        'readyPulling': '下拉即可刷新',
        'isPulling': '松开即可刷新'
      }
      var maxPullHeight = height + 30
      var _translateObj = {

        translate: function (height) {

          $(target).css({
            '-webkit-transform': 'translate(0,' + height + 'px)',
            'transform': 'translate(0,' + height + 'px)'
          })
        },
        transition: function (time) {

          $(target).css({
            '-webkit-transition': 'all ' + time + 's ease-in-out',
            'transition': 'all ' + time + 's ease-in-out'
          })

        },
        getDefault: function () {

          _translateObj.translate(0)
          _translateObj.transition(0.25)
        }

      }
      var _touchstartHandler = function (e) {

        $(loading_icon).removeClass(loading_icon_className)
        var even = typeof event == "undefined" ? e : event
        _start = _hasTouch ? even.touches[0].pageY : even.pageY

        if (!_refreshFlag.isGettingData) {

          _refreshFlag.drawinglock = true
        }


        if ($(target).scrollTop() > 0) {

          _translateObj.translate(0)
        }
      }
      var _touchmoveHandler = function (e) {

        var even = typeof event == "undefined" ? e : event
        _end = _hasTouch ? even.touches[0].pageY : even.pageY

        _pos = _end - _start

        _refreshFlag.isPulling = ($(window).scrollTop() == 0 && _pos > 0)

        _refreshFlag.isdrawing = ($(window).scrollTop() + $(window).height() >= $(document).height()) && _refreshFlag.drawinglock && !isGetAllData && _pos < 0

        if (_refreshFlag.isPulling) {
          _translateObj.transition(0)
          //阻止浏览器的默认行为
          even.preventDefault()
          if (_end - _start <= height) {

            $(loading_text).text(matchTest["readyPulling"])

          } else {

            $(loading_text).text(matchTest["isPulling"])
          }

          if (_pos <= maxPullHeight) {

            _translateObj.translate(_pos)

          } else {

            _translateObj.translate(maxPullHeight)
          }
        }
        if (_refreshFlag.isdrawing) {

          _refreshFlag.isGettingData = true

          _refreshFlag.drawinglock = false

          console.log('drawing执行了')

          footer_loading_pannel.show()

          getMoreLockList(function (data) {

            if (data) {

              //获取加载过来的li列表
              var lis = createLockList(data)

              for (var i = 0; i < lis.length; i++) {

                main_lock_list_container.append(lis[i])
              }

            }

            _refreshFlag.isGettingData = false

            footer_loading_pannel.hide()

          })

        }

      }
      var _touchendHandler = function (e) {
        console.log('触摸结束事件被执行了')
        var even = typeof event == "undefined" ? e : event


        if (_refreshFlag.isPulling) {

          if (_pos > height) {

            $(loading_icon).addClass(loading_icon_className)

            _translateObj.transition(0.2)

            //设定初始值为0
            LoadingStartIndex = 0
            //恢复是否加载完了所有数据为false
            isGetAllData = false

            getMoreLockList(function (data) {

              if (data) {

                console.log(data)

                main_lock_list_container.empty()
                //获取加载过来的li列表
                var lis = createLockList(data)

                //获取加载过来的li列表
                var lis = createLockList(data)

                for (var i = 0; i < lis.length; i++) {

                  main_lock_list_container.append(lis[i])
                }


              }

              _translateObj.translate(0)


            })

          } else {

            _translateObj.getDefault()

          }

          _refreshFlag.isPulling = false
        }
      }
      this._bindtouchEvent = function (e) {

        $(target).on('touchstart', _touchstartHandler)

        $(target).on('touchmove', _touchmoveHandler)

        $(target).on('touchend', _touchendHandler)

      }
    }
    var pull = new pull_refresh($('#main_lock_msg'), 60, $('.pull-area .circle'), 'circle', $('.pull-text'))
    pull._bindtouchEvent()

    var changeSwitchDetail = function (that, lock_switch, switch_flag, delayicon, lock_status) {

      //0代表关状态，1代表开状态
      //执行关锁操作
      if (switch_flag) {
        loadding_pannel.show()
        delayicon.addClass("scrollani")

        setTimeout(function () {

          delayicon.removeClass("scrollani")

          loadding_pannel.hide()

          delayicon.addClass("scrollani")

          lock_status.removeClass("top-down")

          lock_status.addClass("top-up")

          that.removeClass("off")

          that.addClass("on")

          that.text("降")

          lock_switch.attr('flag', 0)

        }, 400)
      } else {
        //执行开锁操作
        loadding_pannel.show()
        delayicon.addClass("scrollani")
        setTimeout(function () {

          delayicon.removeClass("scrollani")

          loadding_pannel.hide()

          delayicon.addClass("scrollani")

          lock_status.removeClass("top-up")

          lock_status.addClass("top-down")

          that.removeClass("on")

          that.addClass("off")

          that.text("升")

          lock_switch.attr('flag', 1)

        }, 400)
      }
    }

    var changeSwitch = function (e) {
      var that = $(this)
      var lock_switch = $(this).parents('.lock-switch')
      var switch_flag = parseInt(lock_switch.attr('flag'))
      var delayicon = loadding_pannel.find('.iconfont')
      var lock_status = lock_switch.parents('.lock-controller').prev('.lock-img-msg').find('.lock-status')
      changeSwitchDetail(that, lock_switch, switch_flag, delayicon, lock_status)

    }
    var changeSwitchSingle = function (e) {
      var that = $(this)
      var lock_switch = $(this).parents('.lock-switch')
      var switch_flag = parseInt(lock_switch.attr('flag'))
      var delayicon = loadding_pannel.find('.iconfont')
      var lock_status = $('#box_company_pannel').find('.controller-area .lock-status')
      changeSwitchDetail(that, lock_switch, switch_flag, delayicon, lock_status)

    }
    main_lock_list_container.on('tap', '.btn', changeSwitch)
    $('#box_company_pannel').find('.main-pannel .lock-switch .btn').on('tap', changeSwitchSingle)
    //创建车锁列表的方法
    function createLockList(data) {

      var li_list = []

      for (var i = 0; i < data.length; i++) {

        var li = $("<li class='item border-1px-bottom'></li>")

        var lock_img_msg = $("<div class='lock-img-msg'></div>")

        var lock_status = data[i].lockstatus ? $("<div class='lock-status top-down'></div>") : $("<div class='lock-status top-up'></div>")

        var top_img = $("<img src='/images/top.png' alt='' class='top' >")

        var bottom_img = $("<img src='/images/bottom.png' alt='' class='bottom'>")

        lock_status.append(top_img)

        lock_status.append(bottom_img)

        var lock_num = $("<p class='lock-num'></p>")

        lock_num.text(data[i].id)

        lock_img_msg.append(lock_status)

        lock_img_msg.append(lock_num)

        var lock_controller = $("<div class='lock-controller'></div>")

        var community_content = $("<span class='community-content'></span>")

        community_content.text(data[i].comunity)

        var lock_switch = $("<div class='lock-switch'></div>")

        lock_switch.attr('flag', data[i].lockstatus)

        var btn

        if (data[i].lockstatus) {
          btn = $("<span class='btn off'>升</span>")
        } else {
          btn = $("<span class='btn on'>降</span>")
        }

        lock_switch.append(btn)

        var last_stop_content = $("<p class='last-stop-content'><span class='last-stop-time'>12-17 23:01:47</span><i class='iconfont'>&#xe748;</i></p>")

        lock_controller.append(community_content)

        lock_controller.append(lock_switch)

        lock_controller.append(last_stop_content)

        li.append(lock_img_msg)

        li.append(lock_controller)

        li_list.push(li)

      }

      return li_list
    }

  })
</script>
</html>